<template>
  <div>
    <!-- ComputedView -->
    <!-- 计算属性 -->
    <!-- 过滤器 filter 淘汰 -->
    <!-- {{ time }}
    <h2>{{ times | formDate }}</h2> -->
    <!-- 过滤器的使用方式 -->

    <!-- 计算属性以来data中定义的变量 当变量发生修改时 计算属性会重新自动计算 得出最后的结果 然后return 必须要return 可以直接当作变量去使用 可以直接当作变量在视图层使用 -->
    <!-- <input type="text" v-model="times" />
    <h2>{{ setDate }}</h2> -->

    开始时间 <input type="text" v-model="time1" id="">---
    结束时间 <input type="text" v-model="time2" id=""><br>
    <div v-html="setDate2"></div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date().toLocaleString(),
      times: 1767196800000,
      time1: 1767116800000,
      time2: 1767196800000,
      
    };
  },
  //   有缓存值的功能可以直接当变量使用
  computed: {
    setDate2() {
      let and = this.time2 - this.time1;
      let s = Math.floor((and / 1000) % 60);//秒
      let m = Math.floor((and / 1000 / 60) % 60);//分
      let h = Math.floor((and / 1000 / 60 / 60) % 24);//时
      let d = Math.floor(and / 1000 / 60 / 60 / 24);  //天
      return `<h2>${d}天${h}小时${m}分钟${s}秒</h2>`
    },
    setDate() {
      let d = new Date(this.times);
      let d1 = d.getFullYear();
      let d2 =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let d3 = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
      console.log(d1, d2, d3);

      return `${d1}+${d2}+${d3}`;
      //   return "必须要return";
    },
  },

  //   过滤器
  filters: {
    formDate(d) {
      console.log(d);
      d = new Date(d);
      let d1 = d.getFullYear();
      let d2 =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let d3 = d.getDate() < 10 ? "0" + (d.getDate() + 1) : d.getDate() + 1;
      console.log(d1, d2, d3);

      return d1, d2, d3;
    },
  },
  methods: {},
};
</script>

<style>
</style>